import React, { Component } from 'react'
// import * as Actions from './store'
import { connect } from 'react-redux'
import { add, addAsync, reduce } from './store/actions/index'

class App extends Component {

    add = () => {
        const { add } = this.props
        add(100)
    }

    addAsync = () => {
        const { addAsync } = this.props
        addAsync(200)
    }

    reduce = () => {
        const { reduce } = this.props
        reduce(3)
    }

    render() {
        const { state } = this.props
        console.log(this.props)
        return (
            <div>
                <h1>App</h1>
                <p>{state.join(', ')}</p>
                <button onClick={this.add} >+</button>
                <button onClick={this.addAsync} >+ Async</button>
                <button onClick={this.reduce} >-</button>
            </div>
        )
    }
}

const mapStateToProps = state =>({
    state: state.login
})

const mapDispatchToProps = {
    add, addAsync, reduce
}

export default connect(mapStateToProps, mapDispatchToProps)(App)
